<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>红绿灯倒计时</title>
    <style>
        .box {
            width: 290px;
            height: 70px;
            border-radius: 10px;
            border: 1px solid black;
        }

        .box div {
            float: left;
            margin-left: 20px;
            width: 45px;
            height: 45px;
            border-radius: 45px;
            border: 1px solid purple;
            margin-top: 10px;
        }

        .box .count {
            width: 60px;
            border: 0px;
            font-size: 280%;
        }

        .red {
            background-color: red;
        }

        .yellow {
            background-color: yellow;
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>

    <body>
        <div class="box">
            <div id="red"></div>
            <!-- 红灯 -->
            <div id="yellow"></div>
            <!--黄灯 -->
            <div id="green"></div>
            <!-- 绿灯 -->
            <div id="count" class="count"></div>
            <!-- 倒计时 -->
        </div>
        <script>
            var lamp = {
                red: { //红灯相关数据
                    obj: document.getElementById("red"),
                    timeout: 30,
                    style: ['red', 'gray', 'gray'],
                    next: 'green'
                },
                yellow: { //黄灯相关数据
                    obj: document.getElementById("yellow"),
                    timeout: 5,
                    style: ['gray', 'yellow', 'gray'],
                    next: 'red'
                },
                green: { //绿灯相关数据
                    obj: document.getElementById("green"),
                    timeout: 35,
                    style: ['gray', 'gray', 'green'],
                    next: 'yellow'
                },
                changeStyle(style) { //设置信号背景色样式
                    this.red.obj.className = style[0];
                    this.yellow.obj.className = style[1];
                    this.green.obj.className = style[2];
                }
            };
            var count = {
                obj: document.getElementById('count'), //倒计时的元素对象
                change: function(num) {
                    this.obj.innerHTML = (num < 10) ? ('0' + num) : num;
                }
            };
            var now = lamp.green; //获取绿灯亮的相关数据
            var timeout = now.timeout; //获取绿灯亮灯的剩余时间
            lamp.changeStyle(now.style); //设置绿灯亮时,红绿灯背景色样式
            count.change(timeout); //设置绿灯亮灯的剩余时间

            setInterval(function() {
                if (--timeout <= 0) { //切换信号灯
                    now = lamp[now.next]; //获取下一个亮灯的信号灯的相关数据
                    timeout = now.timeout; //获取信号灯的剩余时间
                    lamp.changeStyle(now.style); //设置信号灯背景色样式
                }
                count.change(timeout); //设置信号灯亮灯的剩余时间
            }, 1000);
        </script>
        <p><a href="C:\Users\Administrator\Desktop\DOM\181164331杨澳\第六章.html">返回第六章</a></p>
    </body>
</html>